<template>
	<view class="page detail">

		<view class="bor r40 bgff search flex flexC px14 py8 mb10 mt10 ml4 mr4">
			<image class="mr10" src="/static/img/icon/search.png" mode="aspectFill"></image>
			<input @input="searchInput($event)" type="text" placeholder="请输入您要搜索的商品" />
		</view>

		<view class="flex flexS">
			<scroll-view class="menu bgf5" scroll-y="true">
				<view @click="onSelectorMenu(index,item)" v-for="(item,index) in menuList" :key="index"
					class="item px12 flex flexJC flexC" :class="currentIndex == index ? 'active' : ''">
					{{item.name}}
				</view>
			</scroll-view>
			<scroll-view scroll-y="true" class="scroll bgff" @scrolltolower="nextPage">
				<view class="flex flexC borb px16 py13">
					<view v-if="currentCate != null" class="fs12 mr30">{{currentCate.name}}
					</view>
				</view>
				<view v-for="(item,index) in productList" class="bgff px12 py10 flex flexC borb" @click="detail(item)">
					<image class="logo bgf5 r5" :src="item.image" mode="aspectFill"></image>
					<view class="flex1 pl8">
						<view class="fs12 bold6 ellipsis1">{{item.goods_name}}</view>
						<view class="c79 fs10 ellipsis1 mt4">{{item.spec_name}}</view>
						<view class="flex flexC mt7 fs12 cff0">
							<view class="flex1 bold6">￥{{item.goods_min_price}}</view>
							
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 0,
				tabs: ['我的商品', '批发商品'],
				currentIndex: 0,
				menuList: [],
				sortIndex: 0,
				currentCate: null,
				cateName: "",
				productList: [],
				page: 1,
				isLastPage: false,
				isnodata: false,
				num: null,
				isUpdate: false,
				weight: 1,
				keyword:''

			}
		},
		onLoad(option) {

			this.tabIndex = option.index;

		},
		onShow() {
			this.isLastPage = false;
			this.page = 1;
			this.productList = [];
			this.getCateList();
		
		},

		onReachBottom() {

		},
		methods: {
			
			searchInput(e){
			
				this.keyword = e.detail.value;
			},
			
			nextPage() {

				if (this.isLastPage) return;
				this.page += 1;
				this.getGoodList();
			},

			detail(item) {
				uni.redirectTo({
					url: './sysProductDetail?good_id=' + item.id
				})
			},

			cancel() {
				this.$refs.classaddPopup.close()
			},
			
			getCateList() {


				let param = {
				}
				let that = this;
				this.$api.onlineCateList(param).then(res => {

					if (res.code == 1) {
						that.menuList = res.data;
						if (that.menuList.length > 0) {
							that.currentCate = that.menuList[0];
							that.getGoodList();
						}
						console.info(res);
					}
				})
			},

			getGoodList() {
				let param = {
					id: this.currentCate.id,
					page: this.page,
				}
				let that = this;
				this.$api.onlineGoodsList(param).then(res => {

					if (res.code == 1) {
						let length = res.data.length;
						for (let i = 0; i < length; i++) {
							that.productList.push(res.data[i]);
						}
						if (that.productList.length > 0) {
							that.isnodata = false;
						} else {
							that.isnodata = true;
						}
						if (length < 10) {
							that.isLastPage = true;
						} else {
							that.isLastPage = false;
						}
						console.info(res);
					}
				})
			},

			onChangeTabs(index) {
				this.tabIndex = index;
				if (index == 0) {
					this.page = 1;
					this.productList = [];
					this.getGoodList();
				} else {
					this.productList = [];
					this.page = 1;
				}
			},
			onSelectorMenu(index, item) {
				this.currentIndex = index
				this.currentCate = item;
				this.page = 1;
				this.productList = [];
				this.getGoodList();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.detail {
		.tabs {
			.item {
				box-sizing: border-box;
				position: relative;

				&.active {
					&::after {
						content: '';
						width: 108upx;
						height: 4upx;
						background-color: #00B0DD;
						position: absolute;
						bottom: 8upx;
						left: calc(50% - 54upx);
					}
				}
			}
		}

		.w16 {
			width: 32upx;
			height: 32upx;
		}

		.icon {
			width: 42upx;
			height: 42upx;
		}

		.menu {
			width: 170upx;
			height: calc(100vh );

			.item {
				height: 100upx;

				&.active {
					background-color: #fff;
					color: #000;
					font-weight: 600;
				}
			}
		}

		.scroll {
			height: calc(100vh - 80upx);
			width: calc(100vw - 170upx);

			.logo {
				position: relative;
				width: 112upx;
				height: 112upx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.ellipsis1 {
				width: 400upx;
			}

			.bg85 {
				background-color: #858585;
			}
		}
		
		.search {
			image {width: 24upx;height: 24upx;}
		}

	}
</style>
